import React, {Component} from 'react';
import {CSSTransition} from 'react-transition-group';
import './transition.css'


class Transition extends Component {
    constructor(props) {
        super(props)
        this.state={
            show:true
        }

    }

    render() {
        return <div>
        {/*    classNames='wx'  自定义动画名称*/}
        {/*    el  指的就是CSSTransition包裹的这个div元素*/}
        {/*in 类似于监听 当xx改变时，就往元素上加样式*/}
        {/*in 官方解释：控制组件应用动画的属性值，通常将一个react的组件state赋值给它，通过改变state，从而开启和关闭动画*/}
        {/*元素首次进场时就有动画---设置 appear={true}  再在css文件中使用对应的appear类样式*/}
        <CSSTransition
            in={this.state.show}
            timeout={1000}
            classNames='wx'
            unmountOnExit
            onEnter={(el)=>{el.style.color='blue'}}
            appear={true}
        >
                 <div> hello world</div>
                </CSSTransition>
            <button onClick={this.handleBtn}>点击</button>
        </div>
    }
    handleBtn=()=>{
      this.setState({
          show:this.state.show?false:true
      })
    }
}


export default Transition;

